import { resourceLibraryApi, videoApi } from '@/api';
import { useSafeState } from 'ahooks';
import { Descriptions } from 'antd';
import { useEffect, useMemo } from 'react';
import { YmVideoPlayer } from 'ym-design';
import { ICourseWareDetail } from '../common/interface';

const VideoCourseWareDetail = (props: { coursewareId: string; drawerWidth: number; noStyle?: boolean }) => {
  const { coursewareId, drawerWidth, noStyle } = props;
  const [videCourseWareDetail, setVideCourseWareDetail] = useSafeState<ICourseWareDetail>();
  const videPlaySize = useMemo(() => {
    if (!drawerWidth) return null;
    const videWidth = drawerWidth - 24 * 2;
    const videHieght = Math.floor(videWidth / 1.7);
    return { width: videWidth, height: videHieght };
  }, [drawerWidth]);
  useEffect(() => {
    resourceLibraryApi.getCourseWareById({ coursewareId }).then((res) => {
      const data = res.data as ICourseWareDetail;
      setVideCourseWareDetail(data);
    });
  }, [coursewareId, setVideCourseWareDetail]);

  const getApi = async (params: unknown) => {
    const { data } = await videoApi.getPlayerAuthTokenApi(params);
    return data;
  };

  return (
    <div className="courseware_drawer_content">
      {videCourseWareDetail && videPlaySize ? (
        <>
          <Descriptions column={2} className={noStyle ? undefined : 'ym_descriptions'}>
            <Descriptions.Item label="课件名称" span={1}>
              {videCourseWareDetail.name}
            </Descriptions.Item>
            <Descriptions.Item label="创建时间" span={1}>
              {videCourseWareDetail.newCreateTime}
            </Descriptions.Item>
            <Descriptions.Item label="课件id" span={2}>
              {videCourseWareDetail.coursewareId}
            </Descriptions.Item>
          </Descriptions>
          <Descriptions column={2} className={noStyle ? undefined : 'ym_descriptions'}>
            <Descriptions.Item label="" span={2}>
              <YmVideoPlayer vid={videCourseWareDetail.vedioId} getPlayerAuthTokenApi={getApi} {...videPlaySize} />
            </Descriptions.Item>
          </Descriptions>
        </>
      ) : null}
    </div>
  );
};

export default VideoCourseWareDetail;
